<template>
  <div>
    <div class="ad-drag-wrap">
      <v-drag-layout ref="dragLayout" :options="options" active-color="#156DFF" v-model="form"
        :class="{ enable_service: form.config.enable_service }">
        <!-- 左侧 -->
        <template #widget="{ data }"><i :class="data.icon" /> {{ data.name }} </template>
        <!-- 视图 -->
        <template #view="{ data }">
          <component :key="data.uid" :is="(data.share_type || data.type) + '-view'" :view="data"
            :ref="(data.share_type || data.type) + '-view'" />
        </template>
        <template #ext-view>
          <div class="ext-view">
            <div class="service" v-if="form.config.enable_service">客服</div>
            <template v-for="view in form.views">
              <div :key="view.uid" v-if="view.type == 'service'" class="service">
                service {{ view.uid }}
              </div>
            </template>
          </div>
        </template>
        <!-- 配置 -->
        <template #conf="{ data }">
          <h4 class="conf-title">配置：{{ data.name }}</h4>
          <div class="conf-content">
            <component :key="data.uid" :is="(data.share_type || data.type) + '-edit'" :adMpList="adMpList"
              :selfAdList="selfAdList" :configForm="form" v-bind="widgetProps(data)" />
          </div>
        </template>
        <template #page>
          <div class="conf-content">
            <page-info ref="pageInfoRef" :config.sync="form.config" :adMpList="adMpList" :saving="saving"
              :configForm="form" @change-biz="getAdMpList" />
          </div>
        </template>
      </v-drag-layout>
    </div>
    <div class="toolbar-wrap flex-column flex-align-center">
      <div class="tips ptb-2">点击导航可修改页面信息</div>
      <div>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button @click="$router.go(-1)">返回列表</el-button>
      </div>
    </div>
  </div>
</template>
<script>
// import VDragLayout from "v-drag-layout";
// import "v-drag-layout/dist/style.css";
import VDragLayout from "@/plugins/v-drag-layout/index.es.js";
import "@/plugins/v-drag-layout/style.css";
import qs from "qs";
import { isArray } from "cl-admin/utils";

import { ossHost, cdnHost } from "@/config/env.js";
import { uuid } from "@/utils";
import PageInfo from "../components/edit/page-info";

import ImageView from "../components/view/image";
import ImageEdit from "../components/edit/image";
// 文章

import ArticleView from "../components/view/article";
import ArticleEdit from "../components/edit/article";
// 商城
import ShopView from "../components/view/shop";
import ShopEdit from "../components/edit/shop";
// 拼团
import GroupBuyView from "../components/view/group-buy";
import GroupBuyEdit from "../components/edit/group-buy";

import MyOrderView from "../components/view/my-order";
import MyOrderEdit from "../components/edit/my-order";
import WechatView from "../components/view/wechat";
import WechatEdit from "../components/edit/wechat";
import DynamicQrcodeView from "../components/view/dynamic-qrcode";
import DynamicQrcodeEdit from "../components/edit/dynamic-qrcode";

// 审核表单
import CheckFormView from "../components/view/check-form";
import CheckFormEdit from "../components/edit/check-form";

// 微信客服
import WechatContactView from "../components/view/wechat-contact";
import WechatContactEdit from "../components/edit/wechat-contact";

//评论
import WechatRemarkView from "../components/view/wechat-remark";
import WechatRemarkEdit from "../components/edit/wechat-remark";

//轮播问答
import QaSwipeView from "../components/view/qa-swipe.vue";
import QaSwipeEdit from "../components/edit/qa-swipe.vue";

//对话问答
import BtnMessageView from "../components/view/btn-message";
import BtnMessageEdit from "../components/edit/btn-message";

//图片长按
import ImageLongTouchView from "../components/view/image-long-touch";
import ImageLongTouchEdit from "../components/edit/image-long-touch";

//聊天客服3 (获客用）
import CustomerServiceThreeView from "../components/view/customer-service-three";
import CustomerServiceThreeEdit from "../components/edit/customer-service-three";

import { tplData, tplDataMap, defaultTplConf } from "./tpl_data";

const defaultConfig = { ...defaultTplConf };

export default {
  name: "AdEditor",
  components: {
    VDragLayout,
    PageInfo,
    // 图片
    ImageView,
    ImageEdit,
    // 文章
    ArticleView,
    ArticleEdit,
    // 评论
    // CommentView: () => component("view/comment"),
    // CommentEdit: () => component("edit/comment"),
    // 加微
    // ServiceView: () => component("view/service"),
    // ServiceEdit: () => component("edit/service"),
    // 商城
    ShopView,
    ShopEdit,
    // 拼团
    GroupBuyView,
    GroupBuyEdit,
    //我的订单
    MyOrderView,
    MyOrderEdit,
    // 微信关注
    WechatView,
    WechatEdit,
    // 动态二维码
    DynamicQrcodeView,
    DynamicQrcodeEdit,
    // 审核表单
    CheckFormView,
    CheckFormEdit,
    // 微信客服
    WechatContactView,
    WechatContactEdit,
    //评论
    WechatRemarkView,
    WechatRemarkEdit,
    //轮播问答
    QaSwipeView,
    QaSwipeEdit,
    //对话问答
    BtnMessageView,
    BtnMessageEdit,
    //图片长按
    ImageLongTouchView,
    ImageLongTouchEdit,
    //问答
    CustomerServiceThreeView,
		CustomerServiceThreeEdit
  },
  data() {
    return {
      saving: false,
      form: {
        views: [],
        config: { ...defaultConfig }
      },
      backForm: {
        id: undefined,
        views: [],
        config: { ...defaultConfig }
      },
      options: Object.freeze(tplData),
      select: {},
      editing: false,
      // 小程序列表
      adMpList: [],
      selfAdList: [],
      isInit: true
    };
  },
  created() {
    defaultConfig.biz_id = this.getCurrBiz();
    this.form.config.biz_id = defaultConfig.biz_id;
    this.backForm.config.biz_id = defaultConfig.biz_id;
    const { query } = this.$route;
    this.editing = !!query.id;
    this.getSelfAdList();
    if (!this.editing) {
      this.isInit = false;
      this.getAdMpList();

      return;
    }
    this.getInfo();
  },
  methods: {
    async getInfo() {
      const { query } = this.$route;
      const res = await this.$service.ad
        .templateInfo({ id: query.id })
        .catch(() => undefined);
      let info = res ?? query;
      if (!info.tpl_data) {
        this.backForm = {
          config: {
            ...defaultConfig,
            ...info,
            backgroundColor: info.bg_color,
            biz_id: info.biz_id * 1,
            bra_id: info.bra_id == 0 ? "" : info.bra_id * 1,
            code_ids: info.code_ids
              ?.split(",")
              .filter(Boolean)
              .map(Number),
            copy_type: info.copy_type * 1,
            enable_form: info.enable_form * 1,
            enable_service: info.enable_service * 1,
            enable_location_wechat: info.enable_location_wechat * 1,
            form_pay: info.form_pay * 1,
            form_type: info.form_type * 1,
            is_payment: info.is_payment * 1,
            modal_show: info.modal_show * 1,
            mul_city: info.mul_city * 1,
            wechat_tip_show: info.wechat_tip_show * 1
          },
          views: [
            {
              type: "article",
              name: "文章",
              icon: "el-icon-tickets",
              uid: uuid(),
              options: {
                padding_lr: 0,
                padding_tb: 0,
                content: info.content
              }
            },
            {
              type: "article",
              name: "文章",
              icon: "el-icon-tickets",
              uid: uuid(),
              options: {
                padding_lr: 0,
                padding_tb: 0,
                content: info.content2
              }
            }
          ]
        };
        if (info.enable_form == 1) {
          this.backForm.views.push({
            type: info.form_type == 1 ? "shop" : "group-buy",
            share_type: info.form_type == 1 ? "shop" : "group-buy",
            name: info.form_type == 1 ? "商城" : "拼团",
            icon: info.form_type == 1 ? "el-icon-goods" : "el-icon-money",
            uid: uuid(),
            options: {
              fixed: true,
              fixed_height: info.form_type == 1 ? 1.7332 : 2.2888,
              city_data: info.city_data?.split(",").filter(Boolean),
              is_payment: info.is_payment * 1,
              form_pay: info.form_pay * 1,
              original_cost: Number(info.original_cost),
              pay_money: Number(info.pay_money || 0),
              discount_money: Number(info.discount_money || 0)
            }
          });
        }
      } else {
        this.backForm = JSON.parse(info.tpl_data);
        const { skip_mp_id } = this.backForm?.config;
        if (!isArray(skip_mp_id)) {
          this.backForm.config.skip_mp_id = [skip_mp_id];
        }
      }
      if (!this.backForm.config.discount_money) {
        this.backForm.config.discount_money = 0;
      }
      this.backForm.id = info.id;
      let formType = ["shop", "group-buy"];
      this.backForm.views.forEach(v => {
        if (v.type.includes("group-buy")) {
          this.$set(v, "share_type", "group-buy");
          this.$set(v.options, "discount_money", v.options.discount_money || 0);
        }
        if (v.type.includes("shop")) {
          this.$set(v, "share_type", "shop");
        }
        if (formType.includes(v.share_type)) {
          this.$set(
            v.options,
            "fields",
            v?.options?.fields || tplDataMap[v.type].options.fields
          );
        }
      });
      this.form = JSON.parse(JSON.stringify(this.backForm));
      await this.getAdMpList();
      this.isInit = false;
    },

    reset() {
      this.$refs.dragLayout.setSelect();
      this.form = JSON.parse(JSON.stringify(this.backForm));
    },
    async getAdMpList() {
      const { biz_id } = this.form.config;
      if (!this.isInit) {
        this.form.views.forEach(v => {
          if (v.type.includes("wechat")) {
            this.$set(v.options, "skip_mp_id", "");
          }
        });
      }
      this.adMpList = [];
      if (!biz_id) return;
      let list = await this.$service.ad.adMini({ biz_id, ad_id: 1 });
      this.adMpList = list.list || [];

      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs["dynamic-qrcode-view"]?.init();
        }, 1000);
      });
    },
    async getSelfAdList() {
      this.selfAdList = await this.$service.ad.selfLists();
    },
    widgetProps(view) {
      const { config } = this.form;
      let props = {
        view,
        config,
        saving: this.saving
      };
      if (view.type == "wechat") {
        props.adMpList = this.adMpList;
      }
      return props;
    },
    async submit() {
      this.$refs.pageInfoRef.validateForm().then(async (valid) => {
        if (valid) {

          const { config } = this.form;
          const { id } = this.backForm;

          this.form.config.skip_mp_id = config?.skip_mp_id?.filter(e => e);

          this.saving = true;
          let form = {
            id,
            ...config,
            bg_color: config.backgroundColor,
            code_ids: config.code_ids.join(),
            tpl_data: JSON.stringify(this.form)
          };

          // form.tpl_data = form.tpl_data.replaceAll(ossHost, cdnHost);

          await this.$service.ad[this.editing ? "templateEdit" : "templateAdd"](
            qs.stringify(form)
          ).done(() => {
            this.saving = false;
          });
          this.$message.success("操作成功");
          this.$router.replace("/home/wide/mould/mouldList");
        }
      });


    }
  }
};
</script>
<style lang="scss" scoped>
.conf-title {
  padding: 0 10px 10px;
  box-sizing: border-box;
}

.conf-content {
  flex: 1;
  overflow: auto;
}

.ad-drag-wrap {
  height: calc(100% - 90px);
}

::v-deep {
  .drag-layout__content {
    height: 100%;

    // overflow-y: auto;
    .mobile {
      height: 100%;

      .widget-views {
        height: auto;
      }
    }
  }

  .drag-layout__right {
    width: 500px;
    display: flex;
    flex-direction: column;
  }

  .widget-views {
    box-sizing: border-box;
    overflow: overlay;

    &::-webkit-scrollbar {
      width: 0 !important;
    }
  }

  .view-empty {
    background: #ffffff;
    height: 100px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #c1c1c1;
    width: 100%;
  }

  img {
    width: 100%;
    // height: 100%;
    vertical-align: middle;
  }

  .tips {
    color: #aaa;
    font-size: 12px;
  }
}

.enable_service {
  ::v-deep .widget-views {
    padding-bottom: 50px;
  }
}

.ext-view {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 10;

  .service {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
    color: #aaa;
    font-size: 14px;
  }
}
</style>
